<template>
  <div>
    <a-modal
      :visible="visible"
      :title="t('channelManage.label.selectStudents')"
      :cancelText="t('button.cancel')"
      :okText="t('button.close')"
      width="70%"
      @ok="submit"
      @cancel="cancel"
    >
      <pro-query
        :searchParam="searchParam"
        :colSpan="{ label: 7, wrapper: 16}"
        @on-search="search"
        @on-reset="reset"
      />
      <pro-table
        ref="tableRef"
        :fetch="fetch"
        :columns="columns"
        :operate="operate"
        :param="state.param"
        :pagination="pagination"
      >
      </pro-table>
    </a-modal>
  </div>
</template>

<script>
import { reactive } from "vue";
import { student } from "@/api/module/channel-manage";
import { filterEmptyByObject } from "@/tools/common";
import moment from "moment";
import { useI18n } from "vue-i18n";

export default {
  name: "school",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, content) {
    const { t } = useI18n();
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await student(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };
    /// 行操作
    const operate = [
      {
        label: t('button.select'),
        event: function (record) {
          content.emit("studentVisible", {
            visible: "studentVisible",
            data: record,
          });
        },
      },
    ];
    const state = reactive({
      selectedRowKeys: [],
      param: {},
    });

    const columns = [
      { dataIndex: "stuName", key: "stuName", title: t('channelManage.label.fullName') },
      { dataIndex: "colName", key: "colName", title: t('channelManage.label.school') },
      {
        dataIndex: "colBtime",
        key: "colBtime",
        cellRender: (record, data) => {
          const time = data ? moment(data).format("YYYY-MM-DD") : "";
          return time;
        },
        title: t('channelManage.label.enrollmentYear'),
      },
      { dataIndex: "createTime", key: "createTime", title: t('channelManage.label.creationTime') },
    ];

    const cancel = () => {
      content.emit("close", "studentVisible");
    };
    const submit = () => {
      content.emit("close", "studentVisible");
    };

    const searchParam = reactive([
      {
        key: "stuName",
        type: "input",
        label: t('channelManage.label.fullName'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        key: "colName",
        type: "input",
        label: t('channelManage.label.school'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "createTime",
        key: "createTime",
        type: "rangeTime",
        label: t('channelManage.label.creationTime'),
      },
    ]);

    const search = (value) => {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
        createBtime: value.createBtime
          ? moment(value.createBtime[0]).valueOf()
          : undefined,
        createEtime: value.createBtime
          ? moment(value.createBtime[1]).valueOf()
          : undefined,
      };
    };
    const reset = (value) => {
      state.param = {};
    };

    return {
      t,
      columns,
      state,
      operate,
      fetch,
      cancel,
      submit,
      searchParam,
      search,
      reset,
      pagination,
    };
  },
};
</script>

<style scoped>
</style>
